<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="../css/fonts/supp-font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="../css/supp-ui-core.css"/>
        <link rel="stylesheet" href="css/dept_multiple_select.css"/>
    </head>
    <body class="um-vp" ontouchstart>
        <div class="pt-header-search pb-footer h100p" id="multiple">
            <div id="header" class="supp-page-header">
                <div class="supp-header-left icon-fa-back"></div>
                <div class="supp-header-title">
                    请选择部门
                </div>
                <div class="supp-header-right icon-fa-other"></div>
            </div>
            <div class="supp-con-search">
                <form class="supp-header-search">
                    <input class="supp" type="search" placeholder="部门名称/编号">
                </form>
            </div>
            <div id="content" class="h100p ofya bgf">
                <div class="pl24 pr24" v-show="showCrumbs">
                    <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                        <div class="mui-scroll">
                            <div class="crumbs">
                                <template v-for="(item,index) in crumbsList">
                                    <span v-if="index != 0">></span>
                                    <span
                                    v-bind:class="[index == crumbsList.length-1?'':'fcBlue']"
                                    v-on:click="returnsuper(index,item.id)"
                                    >{{item.name}}</span>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pl24 pr24">
                    <template v-for="item in deptList">
                        <div class="supp-list-img xs" v-on:click="selectedRow(item,item.id)" v-bind:key = "item.id">
                            <div class="supp-checkbox" style="position:absolute;">
                                <input type="checkbox" id="checkboxButton2" name='button' v-bind:checked="item.checked">
                                <label for="checkboxButton2" class="icon-label"> <span class="supp-checkbox-text icon-checkbox"></span> </label>
                            </div>
                            <div class="supp-cont-icon" style="left:0.5rem;">
                                <div class="icon-bg" v-bind:style="{'background-image' : 'url('+showImgOrData('/eip/dept/'+item.icon)+')'}"></div>
                            </div>
                            <div class="supp-list-content">
                                <div class="title">
                                    {{item.name}}
                                </div>
                            </div>
                            <template v-if="item.son&&item.son.length>0">
                                <div class="supp-operate" v-on:click.stop="showLowerBtn(item)">
                                    <span class="arrow"></span>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>

            </div>
            <div class="footer_checked_div">
                <div id="" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <div class="mui-scroll">
                        <template v-for="(item,index) in deptSelected">
                            <span> <span>{{item.name}}</span> <span class="remove" v-on:click="removeDept(item.id)">X</span> </span>

                        </template>
                    </div>
                </div>
                <button class="confirmBtn"
                v-bind:class="[confirmBtnDisabled?'confirmDisabled':'']"
                v-on:click="confirmBtn"
                >
                    确定({{deptSelected.length}})
                </button>
            </div>
        </div>
    </body>
    <script src="../../js/appcan.js"></script>
    <script src="../../js/appcan.control.js"></script>
    <script src="../../js/appcan.optionList.js"></script>
    <script src="../../common/js/supp-plugins.js"></script>
    <script src="../../common/js/supp-common.jsx"></script>
    <script src="../../common/js/supp-ui-core.js"></script>
    <script src="js/dept_multiple_select.js"></script>
</html>
